  <template>
  <el-container id="full">
    <el-aside width="160px" :class="{ 'collapse-aside': isCollapse }">
      <div class="logo-box" :class="{ 'collapse-logo': isCollapse }"></div>
      <el-menu
        :uniqueOpened="true"
        :default-active="defaultActive"
        class="el-menu-vertical"
        :collapse="isCollapse"
        router
      >
        <template v-for="menu in $router.options.routes[0].children">
          <el-submenu
            v-if="menu.children && menu.children.length > 0"
            :key="menu.id"
            :index="menu.path"
          >
            <template #title>
              <i class="el-icon-menu"></i>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item
              v-for="childmenu in menu.children"
              :key="childmenu.id"
              :index="childmenu.path"
              @click="selectMenu(childmenu.name, childmenu.path)"
            >
              <i class="el-icon-menu"></i>
              <span>{{ childmenu.name }}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item
            v-else
            :key="menu.id"
            :index="menu.path"
            @click="selectMenu(menu.name, menu.path)"
          >
            <i class="el-icon-menu"></i>
            <template #title>{{ menu.name }}</template>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="leftHeader">
          <div @click="toggle" class="btn-Collapse">
            <i
              class="el-icon-s-unfold collapseIcon"
              :class="{ 'is-active': isCollapse }"
            ></i>
          </div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              v-for="item in currentBreadcrumb"
              :key="item.path"
              >{{ item.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="rightHeader">
          <div class="userLink">
            <el-link :underline="false" type="primary" disabled>admin</el-link>
          </div>
          <el-dropdown>
            <div class="userHeader">
              <img class="userImg" src="@/assets/logo.png" alt="admin" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <el-tabs
          v-model="defaultActive"
          type="card"
          closable
          @tab-click="clickTab"
          @edit="closeTab"
        >
          <el-tab-pane
            :key="item.name"
            v-for="item in editableTabs"
            :label="item.title"
            :name="item.name"
          >
            <router-view />
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  computed: {
    defaultActive: {
      get: function () {
        return this.$store.getters.getDefaultActive;
      },
      set: function (currentActiveItem) {
        this.$store.commit("setDefaultActive", currentActiveItem);
      },
    },
    isCollapse: {
      get: function () {
        return this.$store.getters.getCollapse;
      },
      set: function (isCollapse) {
        this.$store.commit("setCollapse", isCollapse);
      },
    },
    currentBreadcrumb: function () {
      return this.$store.getters.getBreadcrumb;
    },
  },
  data() {
    return {
      editableTabs: [
        {
          title: "主页",
          name: "/dashboard",
        },
      ],
    };
  },
  methods: {
    //展开关闭菜单
    toggle() {
      this.isCollapse = !this.isCollapse;
    },
    //选中菜单
    selectMenu(name, path) {
      let exists = this.editableTabs.filter((tab) => tab.name == path);
      if (exists.length == 0) {
        let current = {
          title: name,
          name: path,
        };
        this.editableTabs.push(current);
      }
      this.defaultActive = path;
    },
    //点击Tab
    clickTab(tab) {
      this.defaultActive = tab.paneName;
      this.$router.push(tab.paneName);
    },
    //关闭Tab
    closeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.defaultActive;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.defaultActive = activeName;
      this.$router.push(activeName);
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
    //退出登录
    loginOut() {
      let that = this;
      this.$confirm("退出后需要重新登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.$store.commit("clearToken");
          this.$router.push("/login");
        })
        .catch(() => {
          console.log("取消退出登录");
        });
    },
  },
  created() {
    this.selectMenu(
      this.$router.currentRoute.value.name,
      this.$router.currentRoute.value.path
    );
  },
  mounted() {},
};
</script>

<style>
#full {
  height: 100%;
}
/* 左侧菜单栏 */
.el-aside {
  height: 100%;
  transition: width 0.8s;
  overflow: hidden;
  background-color: black;
}

/* 折叠后的菜单栏 */
.collapse-aside {
  width: 55px !important;
}

/* 头部 */
.el-header {
  padding: 0;
  margin: 0;
  background-color: #fff;
  height: 55px !important;
  line-height: 55px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

/* 内容区 */
.el-main {
  padding: 0px 10px 10px 10px;
}

/* 去除菜单默认样式 */
.el-menu {
  border: none;
  text-align: left;
  background-color: black;
}

/* 左侧菜单 */
.leftHeader {
  display: flex;
  flex-flow: row nowrap;
  justify-self: flex-start;
  align-items: center;
}

/* 折叠菜单按钮 */
.btn-Collapse {
  width: 40px;
  height: 55px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

/* 菜单折叠图标 */
.collapseIcon {
  color: #606266;
  font-size: 20px;
}

/* 折叠按钮动画 */
.collapseIcon.is-active {
  transform: rotate(180deg);
}

/* logo框 */
.logo-box {
  width: 100%;
  height: 55px;
  background-color: black;
  background-image: url("../../assets/logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}

/* 折叠后logo尺寸调整 */
.collapse-logo {
  background-size: 95% !important;
}

/* tab选项卡 */
.el-tab-pane {
  margin: 0;
}

/* 第一个tab不允许关闭 */
.el-tabs__nav .el-tabs__item:nth-child(1) span {
  display: none;
}

/* 去除菜单默认样式 */
.el-menu-item,
.el-submenu__title {
  color: #fff;
}

/* 清除默认菜单focus颜色 */
.el-menu-item:focus,
.el-menu-item:hover,
.el-submenu__title:focus,
.el-submenu__title:hover {
  background-color: #fff;
  color: black;
}

/* 激活菜单文字颜色 */
.el-menu-item.is-active {
  color: #c9171d;
}

/* 用户头像和操作菜单 */
.rightHeader {
  display: flex;
  flex-flow: row nowrap;
  justify-self: flex-end;
  align-items: center;
  padding-right: 10px;
}

/* 用户头像 */
.userHeader {
  width: 35px;
  height: 35px;
  border-radius: 25px;
  background-color: lightblue;
  overflow: hidden;
  margin-left: 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.userHeader > img:hover {
  width: 50px;
  height: 50px;
}

/* 用户头像 */
.userHeader > img {
  width: 35px;
  height: 35px;
  transition: width 1s;
  transition: height 1s;
}
</style>